import { Suspense } from "react";
import { Spin } from "antd";
import type { JSX } from "react";

export const RouterLazy = (Component: React.LazyExoticComponent<() => JSX.Element>): React.ReactNode => {
    return (
        <Suspense
            fallback={
                <Spin size="large" tip={"加载中..."} className="fixed top-0 left-0 w-full h-full flex justify-center items-center">
                    {/*
                     * 加载指示器 Spin 组件
                     * size="large" 设置为较大尺寸，提供更好的视觉效果
                     * tip 属性显示加载提示文本，提升用户体验
                     */}
                    <div />
                </Spin>
            }
        >
            {/*
             * 被懒加载的组件
             * Suspense 会在组件加载完成前显示 fallback 中的内容
             * 组件加载完成后会自动显示 Component 的内容
             */}
            <Component />
        </Suspense>
    );
};
